/*
简答题：

第一题：谈谈你对工程化的初步认识，结合你之前遇到过的问题说出三个以上工程化能够解决问题或者带来的价值

个人理解工程化是指将日常的开发流程标准化、模块化、流程化，能够简化并统一业务以外的开发流程
真正解决的问题：
1、首先可以统一开发标准，保证组内的文件目录、代码风格等保持一致，有利于协同开发
2、自动化常用的构建工作，节约每一位开发人员的工作时间，提高效率
3、提高项目的可维护性
4、降低上线的风险性

第二题：你认为脚手架除了为我们创建项目结构，还有什么更深的意义？
如上所述，如果组内所有的项目都通过脚手架生成可以统一文件目录、配置文件等，有利于协同开发提高开发效率




编程题：

第一题：概述脚手架实现的过程，并使用 NodeJS 完成一个自定义的小型脚手架工具
脚手架主要通过读取用户的交互答案，读取对应的模板文件并最终输出到目标目录
*/
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')

//交互命令
inquirer.prompt([
    type:'input',
    name:'name',
    message:'project name'
]).then(answers =>{
    const tmplDir = path.join(__dirname,'templates')
    const destDir = prcess.cwd();

    fs.readdir(tmplDir,(err,files)=>{
        if(err){
            throw err
        }
        files.forEach(file=>{
            fs.writeFileSync(path.join(destDir,file),result)
        })
    })
})


//第二题：gulp完成自动化构建
const { src, dest, parallel, series, watch } = require('gulp')

//删除文件
const del = require('del')

//server
const browserSync = require('browser-sync')

//自动加载插件的插件，驼峰调用
const loadPlugins = require('gulp-load-plugins')

const plugins = loadPlugins()
const bs = browserSync.create()

const data = {
  menus: [
    {
      name: 'Home',
      link: 'index.html'
    },
    {
      name: 'About',
      link: 'about.html'
    },
  ],
  pkg: require('./package.json'),
  date: new Date()
}

//删除文件
const clean = () => {
  return del(['dist', 'temp'])
}

const style = () => {
  return src('src/assets/styles/*.scss', { base: 'src' })//模仿目录
    .pipe(plugins.sass({ outputStyle: 'expanded' }))//完全展开
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

const script = () => {
  return src('src/assets/scripts/*.js', { base: 'src' })
    .pipe(plugins.babel({ presets: ['@babel/preset-env'] }))
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))
}

const page = () => {
  return src('src/*.html', { base: 'src' })
    .pipe(plugins.swig({ data, defaults: { cache: false } })) // 防止模板缓存导致页面不能及时更新
    .pipe(dest('temp'))
    .pipe(bs.reload({ stream: true }))//reload，以流的方式推到服务器
}

const image = () => {
  return src('src/assets/images/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const font = () => {
  return src('src/assets/fonts/**', { base: 'src' })
    .pipe(plugins.imagemin())
    .pipe(dest('dist'))
}

const extra = () => {
  return src('public/**', { base: 'public' })
    .pipe(dest('dist'))
}

const serve = () => {
//监视api，指定目录和任务
  watch('src/assets/styles/*.scss', style)
  watch('src/assets/scripts/*.js', script)
  watch('src/*.html', page)
  watch([
    'src/assets/images/**',
    'src/assets/fonts/**',
    'public/**'
  ], bs.reload)

  bs.init({
    notify: false,
    port: 2080,
    server: {
    //直接拷贝image和public到服务器
      baseDir: ['temp', 'src', 'public'],
      //基础目录
      //额外目录，优先级更高
      routes: {
        '/node_modules': 'node_modules'
      }
    }
  })
}

//异步执行
const compile = parallel(style, script, page)

// 上线之前执行的任务，同步执行
const build =  series(
  clean,
  parallel(
    compile,
    image,
    font,
    extra
  )
)

const develop = series(compile, serve)

module.exports = {
  clean,
  build,
  develop
}
//第三题：grunt完成自动化构建
const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks')
module.exports = grunt =>{
    grunt.initConfig({
        sass:{
            options:{
                sourceMap:true,
                implementation:sass
            },
            main:{
                files:{
                    'dist/css/main.css':'src/assets/styles/main.scss',
                    'dist/css/icons.css':'src/assets/styles/_icons.scss',
                    'dist/css/variables.css':'src/assets/styles/_variables.scss'
                }
            }
        },
        babel:{
            options:{
                sourceMap:true,
                presets:['@babel/preset-env']
            },
            main:{
                files:{
                    'dist/js/app/js':'src/assets/scriptts/app.js'
                }
            }
        },
        watch:{
            js:{
                files:['src/assets/scripts/*.js'],
                tasks:['babel']
            },
            css:{
                files:['src/assets/styles/*.scss'],
                tasks:['sass']
            }
        }
    })

    loadGruntTasks(grunt)

    grunt.registerTask('default',['sass','babel','watch'])
}